import useTableList from '@/utils/useTableList';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Col, Flex, Form, Input, Row, Select, Table, Tag } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import { getAllAreaByParentIdApi, getRegionListApi } from '@/services/area';

const Company: React.FC = () => {
  const { loading, form, datasource, page, pageSize, total, onFinish, onPageChange } = useTableList(
    { fetchApi: getRegionListApi },
  );

  const [provinces, setProvince] = useState<any[]>([]);

  const getProvinces = async () => {
    const { rsCode, body } = await getAllAreaByParentIdApi(0);
    if (rsCode === '00000000' && Array.isArray(body)) {
      setProvince(body);
    }
  };

  useEffect(() => {
    getProvinces();
  }, []);

  return (
    <PageContainer>
      <Row gutter={[30, 30]} style={{ padding: '15px 30px' }}>
        <div className={styles.search_box}>
          <Form
            form={form}
            onFinish={onFinish}
            onReset={() => onFinish({})}
            labelCol={{
              span: 5,
            }}
            style={{ width: '100%' }}
          >
            <Row gutter={[20, 20]}>
              <Col xs={24} sm={24} md={12} lg={12} xl={8} xxl={6}>
                <Form.Item label="名称" name="name">
                  <Input placeholder="请输入行政区划名称" />
                </Form.Item>
              </Col>
              <Col xs={24} sm={24} md={12} lg={12} xl={8} xxl={6}>
                <Form.Item label="省份" name="parentId">
                  <Select
                    options={provinces}
                    placeholder="请选择省份"
                    fieldNames={{ label: 'name', value: 'id' }}
                    allowClear
                  />
                </Form.Item>
              </Col>
              <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={12}>
                <Flex align="center" justify="flex-end" gap={15}>
                  <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
                    查询
                  </Button>
                  <Button htmlType="reset" icon={<ReloadOutlined />}>
                    重置
                  </Button>
                </Flex>
              </Col>
            </Row>
          </Form>
        </div>
        <div className={styles.table_box}>
          <Table
            columns={[
              {
                title: '编码',
                dataIndex: 'id',
                key: 'id',
                width: 150,
              },
              {
                title: '名称',
                dataIndex: 'name',
                key: 'name',
                width: 200,
              },
              {
                title: '级别',
                dataIndex: 'level',
                key: 'level',
                width: 100,
                render: (l) => {
                  if (l === 'province') {
                    return <Tag color="cyan">省份</Tag>;
                  } else if (l === 'city') {
                    return <Tag color="green">城市</Tag>;
                  } else if (l === 'district') {
                    return <Tag color="orange">区</Tag>;
                  } else {
                    return '--';
                  }
                },
              },
              {
                title: '省份',
                dataIndex: 'parentId',
                key: 'parentId',
                width: 200,
                align: 'center',
                render: (id: number) => {
                  const parent = provinces.find((item) => item.id === id);
                  return parent ? parent.name : '--';
                },
              },
              {
                title: '经纬度',
                dataIndex: 'location',
                key: 'location',
                render: (location: string) => {
                  if (!location) {
                    return '-';
                  } else {
                    const [lat, lon] = location.split(',');
                    return (
                      <Flex vertical gap={5}>
                        <div>经度：{lat}</div>
                        <div>纬度：{lon}</div>
                      </Flex>
                    );
                  }
                },
              },
            ]}
            dataSource={datasource}
            loading={loading}
            rowKey="id"
            scroll={{ x: 1000 }}
            pagination={{
              current: page,
              pageSize: pageSize,
              total: total,
              showSizeChanger: false,
              showQuickJumper: true,
              onChange: onPageChange,
              showTotal: (total) => `共 ${total} 条数据`,
            }}
          />
        </div>
      </Row>
    </PageContainer>
  );
};

export default Company;
